<%-- 
    Document   : employeeCalender
    Created on : Oct 4, 2012, 1:44:38 PM
    Author     : Nguyen Hung
--%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
<%@taglib prefix="rich" uri="http://richfaces.org/rich" %>
<%@taglib prefix="a4j" uri="http://richfaces.org/a4j" %>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" language="javascript" src="../scripts/jQuery/jquery.fancybox-1.3.4.pack.js"></script>
        <link rel='stylesheet' type='text/css' href='../css/fullcalendar.css' />
        <link rel='stylesheet' type='text/css' href='../css/fullcalendar.print.css' media='print' />
        <script type='text/javascript' src='../scripts/jQuery/jquery-ui-1.8.23.custom.min.js'></script>
        <script type='text/javascript' src='../scripts/jQuery/fullcalendar.js'></script>

        <script type='text/javascript'>

            $j(document).ready(function() {
                    
        
                
                var date = new Date();
                var d = date.getDate();
                var m = date.getMonth();
                var y = date.getFullYear();
                
                $j('#external-events div.external-event').each(function() {
		
                    // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
                    // it doesn't need to have a start or end
                    var eventObject = {
                        title: $j.trim($j(this).text()) // use the element's text as the event title
                    };
			
                    // store the Event Object in the DOM element so we can get to it later
                    $j(this).data('eventObject', eventObject);
			
                    // make the event draggable using jQuery UI
                    $j(this).draggable({
                        zIndex: 999,
                        revert: true,      // will cause the event to go back to its
                        revertDuration: 0  //  original position after the drag
                    });
			
                });
                
                $j('#CalendarDiv').fullCalendar({
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month,agendaWeek,agendaDay'
                    },
                    defaultView: 'month',
                    firstDay: 1,
                    editable: true,
                    selectable: true,
                    selectHelper: true,
                    aspectRatio: 1.5,
                   
                    events: function(start, end, callback) {
                        var query = document.location.search.substring(1);
                        //   alert(query);
                        $j.ajax({
                            url: 'calendardata.jsp?'+query,
                            dataType: 'xml',
                            data: {
                                // our hypothetical feed requires UNIX timestamps
                                start: Math.round(start.getTime()),
                                end: Math.round(end.getTime())
                            },
                            success: function(doc) {
                                var events = [];
                                $j(doc).find('task').each(function() {
                                    //    alert($j(this).attr('id')+ $j(this).attr('name'));
                                    //  alert($j(this).attr('est')+"----"+$j(this).attr('end'));
                                    events.push({
                                        id: $j(this).attr('id'),
                                        type: $j(this).attr('type'),
                                        title:$j(this).attr('name'),
                                        start: $j(this).attr('est'), // will be parsed
                                        end: $j(this).attr('end'),
                                        reason: $j(this).attr('reason'),
                                        //  status: $j(this).attr('status'),
                                        backgroundColor :$j(this).attr('status'),
                                        allDay:false
                                    });
                                     
                                    timeFormat: 'H(:mm)'
                                });
                                callback(events);
                            }
                        });
                    },
                    //                   eventColor: function( event, element, view ) { 
                    //                    eventColor: event.status
                    //                    color: 'yellow'
                    //                },
                    //     color: 'yellow',   // an option!
                    //  textColor: 'black', // an option!
                      
                    eventClick: function(event, element) {
                        $j.ajax({
                            
                            type		: "POST",
                            cache	: false,
                            url		: "delete.jsp?id="+ event.id+"&pn100C="+ event.type+"&flag=N500",
                            data		: $j(this).serializeArray(),
                            success: function(data) {
                                $j.fancybox(data);
                            }
                        });    
                    },
                    //  eventMouseover: function(event, domEvent) {
                    //    var layer =	"<div id='events-layer' class='fc-transparent' style='position:absolute; width:100%; height:60px; top:-1px; text-align:right; z-index:9999;'>"+event.reason+"</div>";
                    //     $j(this).append(layer);
                    //   }, 
                    //   eventMouseout: function(calEvent, domEvent) {
                       
                    //    $j(this).find('div[id*=events-layer]').remove();
                    //  $j(this).append(layer);
                     
                    //   },
                    eventResize: function(event,dayDelta,minuteDelta,revertFunc) {

                        //  alert(convert(event.start) +"The end date of " + event.title + "them  " +
                        //      dayDelta + " days and ");
                        $j.ajax({
                            type		: "POST",
                            cache	: false,
                            url		: "editemployeecalender.jsp?id="+ event.id+"&date="+ convert(event.start)+"&adddate="+dayDelta,
                            data		: $j(this).serializeArray(),
                            success: function(data) {
                                $j.fancybox(data);
                            }
                        });    

                    },
                    droppable: true, // this allows things to be dropped onto the calendar !!!
                    drop: function(date, allDay) { // this function is called when something is dropped
			
                        // retrieve the dropped element's stored Event Object
                        var originalEventObject = $j(this).data('eventObject');
				
                        // we need to copy it, so that multiple events don't have a reference to the same object
                        var copiedEventObject = $j.extend({}, originalEventObject);
				
                        // assign it the date that was reported
                        copiedEventObject.start = date;
                        copiedEventObject.allDay = allDay;
				
                        // render the event on the calendar
                        // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
                        $j('#CalendarDiv').fullCalendar('renderEvent', copiedEventObject, true);
				
                        // is the "remove after drop" checkbox checked?
                        if ($j('#drop-remove').is(':checked')) {
                            // if so, remove the element from the "Draggable Events" list
                            $j(this).remove();
                        }
				
                    }
                   
                });
                function convert(str) {
                    var date = new Date(str),
                    mnth = ("0" + (date.getMonth()+1)).slice(-2),
                    day  = ("0" + date.getDate()).slice(-2);
                    return [  day, mnth,date.getFullYear() ].join("/");
                }
               

                $j(".changeFN850").live("change",function(){
                       
                });
		
            });

        </script>
        <style type='text/css'>
            #menu_top {
                float: left;
                padding-left: 0px;
                width: 100%;
            }
            #content {
                background: none repeat scroll 0 0 #FFFFFF;
                margin-left: 0.7%;
                padding: 0 10px 30px;
                width: 97%;
            }

            #main {
                margin: 0 auto;
                position: relative;
                width: 100%;
            }

            #footer {
                height: 150px;
                margin: 0;
                width: 100%;
            }
            #external-events {
                float: left;
                width: 16%;
                padding: 0 10px;
                border: 1px solid #ccc;
                background: #eee;
                text-align: left;
                margin-top: 20px;
            }

            #external-events h4 {
                font-size: 16px;
                margin-top: 0;
                padding-top: 1em;
            }

            .external-event { 
                margin: 10px 0;
                padding: 2px 4px;
                background: #414E5A;
                color: #fff;
                font-size: .85em;
                cursor: pointer;
            }

            #external-events p {
                margin: 1.5em 0;
                font-size: 11px;
                color: #666;
            }

            #external-events p input {
                margin: 0;
                vertical-align: middle;
            }

            #CalendarDiv {
                background-color: #FFFFFF;
                float: right;
                margin-left: 10px;
                margin-top: 10px;
                width: 100%;
            }
            #comboboxZone{
                float:right;
                margin-top: 20px;
            }
            #comboboxZone select{
                width: 131px;
                height: 22px;
            }
            #title{
                margin-top: 5px;
                float: left;
                height: 30px;
                width: 100%;
                background-color: #576675;
                text-align: center;
            }
            #title span{
                color: #FFFFFF;
                float: left;
                font-size: 14px;
                margin-left: 5px;
                margin-top: 3px;
                text-align: center;
            }
            .demohover{
                width: 100px;
                height: 100px;
                background: #000000;
                z-index: 1000;
                position: absolute;
                top: 50%;
                left: 50%;
                display: none;
            }
            /*            .sidebar a.add_new span {
                            width: 142px !important;
                        }*/


            .fc-event-skin:hover .demohover{display: block}


        </style>
    </head>
    <body>
        <a4j:form>
            <div id="content">
                <f:loadBundle basename="#{environmentSession.localizationSource}" var="locale"/>
                <h:outputText value="<div class='permission' lang='#{loginSession.right.EMP_LST_HOL}'></div>" escape="false"/>
                <div id="menu_top" style="margin-botom:20px;">                  
                    <div id="content_detail">
                        <div class="sidebar_row1">
                            <div class="sidebar">
                                <h:panelGroup   id="reload1">
                                    <h:outputLink  rendered="#{loginSession.right.CUS_LST_CRE }" value="editemployeecalender.jsp?action=update&table=A&height=300px&width=400px" styleClass="fancybox add_new" id="fancybox">
                                        <span> <h:outputText value="Quản lý công tác"/></span>
                                    </h:outputLink>


                                </h:panelGroup>

                            </div>
                            <div class="fillter">
                                <div class="dropdown">
                                    <div class="select_choise ">
                                        <a href="#"><span><h:outputText value="Nghỉ theo ngày"/></span></a>

                                    </div>
                                    <div class="select_hidden">
                                        <ul>
                                            <li>                                      
                                                <h:outputLink  value="employeeCalender.jsp?action=datetoday&pageString=datetoday1&type=0">
                                                    <span>  <h:outputText value="Lịch tháng"/> </span>
                                                </h:outputLink>
                                            </li>
                                            <li>                                      
                                                <h:outputLink  value="detailCalender.jsp?action=datetoday&pageString=datetoday2&type=0">
                                                    <span>  <h:outputText value="Danh sách"/> </span>
                                                </h:outputLink>
                                            </li>


                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div id="comboboxZone">
                        <%-- <label class="lbl_editWork" ><h:outputText value="Bộ phận"/> </label>
                         <h:selectOneMenu id="comboboxS200" value="#{n500Controller.bophan}"  styleClass="cbx_editWork required" valueChangeListener="#{n500Controller.changeCombN450forN850ofCalender}" >

                            <f:selectItems value="#{n500Controller.combN450}" />
                            <a4j:support event="onchange" reRender="group" />
                        </h:selectOneMenu>
                        --%>
                        <label class="lbl_editWork" ><h:outputText value="Nhóm tổ"/> </label>
                        <h:selectOneMenu id="group" value="#{n500Controller.FN850}"  styleClass="cbx_editWork required changeFN850">
                            <f:selectItem itemLabel="Vui lòng chọn" />
                            <f:selectItem itemLabel="Tất cả" itemValue="0" />
                            <f:selectItems value="#{n500Controller.combN850}" />
                            <a4j:support event="onchange" reRender="group1" actionListener="#{n500Controller.reloadlist}" />
                        </h:selectOneMenu>
                    </div>
                    <div id="title">
                        <div style="margin-top:4px;">
                            <span>DANH SÁCH NHÂN VIÊN NGHỈ PHÉP THEO NGÀY</span>
                        </div>

                    </div>
                </div>


                <div class="fc-calendar" id="CalendarDiv" ></div>
                <div class="demohover">abc</div>




            </div>
        </a4j:form>
    </body>
</html>
